body{margin: 0; padding: 0;}
.container{
  margin: 0 auto;
}
nav{
  background: linear-gradient(black,#eee);
}
nav ul{
  list-style: none;
}

a{
  text-decoration: none;
  margin: 10px;
  line-height: 30px;
}

a:link,a:active,a:visited{
  color: #fff;
  font-size: 10pt;
}
a:hover{
  font-size: 12pt;
}
.container >header{
  border-radius: 20px 20px 0 0;
  background: linear-gradient(to top,purple,pink);
}

/*产品列表*/
.project-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.project-list> h1{
  width: 100%;
}
.project{
  text-align: center;
  width: 100px;
  height: 150px;
  border: 1px solid #f00;
  margin: 8px;
}
.project>img{
  width: 80px;
  height: 100px;
}
.project>h2{
  margin: 0;
  font-size: 14pt;
}
.project>p{
  margin: 2px;
  font-size: 10pt;
}
/*电脑屏幕*/
@media (min-width:800px) {
  .container{
    width: 800px;
    min-height: 600px;
  }

  nav>a{
    display: none;
  }
  nav > ul >li{
    display: inline-block;
    position: relative;
  }

  /*二级菜单*/
  nav > ul >li >ul{
    display: none;
    width: 100px;
    position: absolute;
    background: linear-gradient(black,#eee);
  }
  nav > ul>li>ul>li{
    list-style: none;
    position: relative;
  }
  nav>ul>li:hover >ul{
    display: block;
  }

  /*三级菜单*/
  nav>ul>li>ul>li>ul{
    display: none;
    width: 80px;
    position: absolute;
    background: linear-gradient(to right,black,#eee);
    left: 100px;
    top: 0px;
  }
  nav>ul>li>ul>li:hover>ul{
    display: block;
  }
}

/*手机屏幕*/
@media (max-width:799px) {
  nav>a{
    display: block;
  }
  nav>ul.open{
    display: none;
  }
  nav>ul{
    display: block;
  }
  nav>ul>li>ul.open{
    display: none;
  }
  nav>ul>li>ul{
    display: block;
  }
  nav>ul>li>ul>li>ul.open{
    display: none;
  }
  nav>ul>li>ul>li>ul{
    display: block;
  }
}
